<template>

    <el-card>
        <el-row :gutter="1">

            <el-col :span="3">
                <el-select v-model="queryInfo.type"   >
                    <el-option

                            label="按学号检索"
                            value="user_id">
                    </el-option>
                    <el-option

                            label="按姓名检索"
                            value="user_name">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="12" style="display: flex">
                <el-input v-model="queryInfo.query"  width="30"></el-input>
                <el-button @click="getAllMembers" type="primary" size="mini">查询</el-button>
                <el-button type="primary" @click="ShowAddMemberDialog" size="mini">添加成员</el-button>
                <el-button type="primary" @click="exportExcel">导出</el-button>
            </el-col>

        </el-row>

        <!--添加成员-->

        <el-dialog
                title="添加成员"
                :visible.sync="addMemberDialogVisible"

                width="60%"
               >

            <el-form ref="form" :inline="true" :model="memberForm" label-width="120px" width="90%">
                <el-form-item label="学号">
                    <el-input v-model="memberForm.user_id"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="memberForm.user_name"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="memberForm.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级">
                    <el-input v-model="memberForm.class"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-input v-model="memberForm.type"></el-input>
                </el-form-item>
                <el-form-item label="所属实验室">
                    <el-input v-model="memberForm.lib"></el-input>
                </el-form-item>
                <el-form-item label="指导老师">
                    <el-input v-model="memberForm.teacher"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="memberForm.tel"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="memberForm.addr"></el-input>
                </el-form-item>
                <el-form-item label="QQ">
                    <el-input v-model="memberForm.qq"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="memberForm.remark"></el-input>
                </el-form-item>

            </el-form>


            <span slot="footer" class="dialog-footer">
    <el-button @click="addMemberDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addMember()">确 定</el-button>
  </span>
        </el-dialog>

<!--编辑信息-->
        <el-dialog
                title="修改"
                :visible.sync="modifyMemberDialogVisible"

                width="60%"
        >
            <el-form ref="form" :inline="true" :model="memberModifyForm" label-width="120px" width="90%">
                <el-form-item label="学号">
                    <el-input v-model="memberModifyForm.user_id"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="memberModifyForm.user_name"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="memberModifyForm.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级">
                    <el-input v-model="memberModifyForm.class"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-input v-model="memberModifyForm.type"></el-input>
                </el-form-item>
                <el-form-item label="所属实验室">
                    <el-input v-model="memberModifyForm.lib"></el-input>
                </el-form-item>
                <el-form-item label="指导老师">
                    <el-input v-model="memberModifyForm.teacher"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="memberModifyForm.tel"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="memberModifyForm.addr"></el-input>
                </el-form-item>
                <el-form-item label="QQ">
                    <el-input v-model="memberModifyForm.qq"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="memberModifyForm.remark"></el-input>
                </el-form-item>

            </el-form>


            <span slot="footer" class="dialog-footer">
    <el-button @click="modifyMemberDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="ModifyMember()">确 定</el-button>
  </span>
        </el-dialog>







        <!--成员列表-->
        <el-row>
            <el-table
                ref="filterTable"
                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                border
                style="width: 100%"
                id="member"
        >
            <el-table-column
                    label="#"
                    type="index">
            </el-table-column>

            <el-table-column
                    label="名字"
                    prop="user_name"
                    width="70"
            >
            </el-table-column>
            <el-table-column
                    label="学号"
                    prop="user_id"
                    width="110">
            </el-table-column>
            <el-table-column
                    label="性别"
                    prop="sex"
                    width="70"
                    :filters="[{ text: '男', value: '男' }, { text: '女', value: '女' }]"
                    :filter-method="filterHandler"
            >
            </el-table-column>
            <el-table-column
                    label="年级"
                    prop="class">
            </el-table-column>

            <el-table-column
                    label="类型"
                    prop="type">
            </el-table-column>
            <el-table-column
                    label="所属实验室"
                    prop="lib">
            </el-table-column>
            <el-table-column
                    label="指导教师"
                    prop="teacher">
            </el-table-column>
            <el-table-column
                    label="状态"
                    prop="status"
                    width="150"
                    :filters="[{ text: '加入', value: true }, { text: '退出', value: false }]"
                    :filter-method="filterStatus"
            >
                <template v-slot="scope">
                    <el-tag>
                        {{scope.row.status?"加入":"退出"}}
                    </el-tag>
                    <el-switch
                            v-model="scope.row.status"
                            @change="ModifyStatus(scope.row)"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                    >

                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                label="电话"
                prop="tel">
            </el-table-column>
            <el-table-column
                    label="地址"
                    prop="addr">
            </el-table-column>
            <el-table-column
                    label="QQ"
                    prop="qq">
            </el-table-column>
            <el-table-column
                    label="备注"
                    prop="remark">
            </el-table-column>

            <el-table-column
                    align="center" width="200">
                <template slot="header" slot-scope="scope">
                    <el-input placeholder="二次姓名检索" v-model="search"  class="input-with-select"></el-input>
                </template>

                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table></el-row>
        <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1,5,10,50]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

    </el-card>




</template>

<script>

    import d from "../../utils/data2excel"

    export default {
        data() {
            return {

                addMemberDialogVisible:false,
                memberForm:{
                    user_id: '',
                    user_name: '',
                    sex: "",
                    class: '',
                    type: '学生',
                    lib: '223',
                    teacher: '廖老师',
                    tel: '',
                    addr: "",
                    qq:'',
                    remark:""
                },
                modifyMemberDialogVisible:false,
                memberModifyForm:{
                    user_id: '',
                    user_name: '',
                    sex: "",
                    class: '',
                    type: '',
                    lib: '',
                    teacher: '',
                    tel: '',
                    addr: "",
                    qq:'',
                    remark:""
                }
                ,
                modifyId:'',
                modifyName:'',
                modifyID:'',
                total:0,
                queryInfo: {
                    type:'user_id',
                    query: '',
                    pagenum: 1,
                    pagesize: 10
                },
                tableData: [],
                search: ''
            }
        },
        created(){
          this.getAllMembers()
        },
        methods: {
            async  handleEdit(index, row) {
                this.modifyId=row.i
                let {data:res}= await this.$http.get(`member/${row.i}`)
                console.log(res.data[0]);
                this.memberModifyForm=
                {   i:res.data[0].i,
                    user_id: res.data[0].user_id,
                    user_name: res.data[0].user_name,
                    sex:res.data[0].sex,
                    class: res.data[0].class,
                    type: res.data[0].type,
                    lib: res.data[0].lib,
                    teacher: res.data[0].teacher,
                    tel:res.data[0].tel,
                    stutas:res.data[0].status,
                    addr: res.data[0].addr,
                    qq:res.data[0].qq,
                    remark:res.data[0].remark
                }
                this. modifyMemberDialogVisible=true

            },
            //修改成员信息
            async  ModifyMember(){
                let {data:res}= await this.$http.put(`member/${this.modifyId}/update`, this.memberModifyForm)
                if( res.meta.status!= 200)  return  this.$message.error(res.meta.msg)
                this.$message.success(res.meta.msg)
                this. modifyMemberDialogVisible=false
                this.getAllMembers()
            },

            async  ModifyStatus(row){
                console.log(row);
                let s= row.status?1:0
                let {data:res}= await this.$http.put(`member/${row.i}/update`,
                    {user_id:row.user_id,
                    user_name:row.user_name,
                    status:s
                })
                if( res.meta.status!= 200)  return  this.$message.error(res.meta.msg)
                this.$message.success(res.meta.msg)
                this.getAllMembers()
            },

            //删除成员
            async handleDelete(index, row) {
                let relust =await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err=>{
                    return err
                })

                if (relust==='confirm'){

                    let {data:res}= await this.$http.delete(`member/${row.i}`)

                    if (res.meta.status != 200) return this.$message.error(res.meta.msg)
                   this.$message.success(res.meta.msg)
                    this.getAllMembers()
                }
            }
            ,
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },

            filterStatus(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            }
            ,ShowAddMemberDialog(){
               this. addMemberDialogVisible=true
            }
            ,
            //添加成员
           async addMember(){
               let {data:res }=await this.$http.put('/member',this.memberForm)
               console.log(this.memberForm);
               if( res.meta.status!= 200)  return  this.$message.error(res.meta.msg)
               this.$message.success(res.meta.msg)
               this. addMemberDialogVisible=false
               this.getAllMembers()
            },


            //获取成员数据
            async getAllMembers(){

                let {data:res }=await this.$http.get('member',{params:this.queryInfo})
                console.log(res);
                if( res.meta.status!= 200)  return  this.$message.error(res.meta.msg)
                this.tableData = res.data.members
                this.queryInfo.pagenum=res.data.pagenum
                this.total=res.data.total
            }
            ,sizeChange(newsize){
                this.queryInfo.pagesize=newsize
                this.getAllMembers()
            },
            currentChange(currentPage){
                this.queryInfo.pagenum=currentPage
                this.getAllMembers()


    },
            //定义导出Excel表格事件
            exportExcel() {
                d('#member','成员信息表'+new Date().toTimeString())
            }



        },
    }
</script>
